<template>
  <div class="template">
    <div class="main pt24 pb24">
      <vuescroll :ops="ops" @handle-scroll="handleComplete">
        <div class="main-list noselect">
          <!--          我的任务待办-->
          <div class="list">
            <div class="list-head">
              <h3>我的任务（{{my_task_list.length||0}}）<span>待办</span></h3>
              <div class="switch-status">
                <el-select v-model="my_task_switch" @change="switch_my_task_list()">
                  <el-option label="全部" value="3">
                  </el-option>
                  <el-option label="今日" value="1">
                  </el-option>
                  <el-option label="未来" value="2">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="list-data scrollbar-y">
              <div v-if="my_task_list.length==0" class="default-page-task">
                <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
                <p>暂无数据</p>
              </div>
              <div class="list-scroll">
                <div class="data my_task_list" @click='openDetails(item,"my_task_list")'
                     v-for="(item,index) in my_task_list" :key="index">
                  <h3>
                    <!-- 进度汇报-->
                    <i v-if="item.progress==1" class="report"></i>
                    <!--  不是进度汇报，逾期了,里程碑任务-->
                    <i v-else-if="item.progress==2&&item.overdue&&item.taskType==1" class="overdue"></i>
                    <!--  不是进度汇报，逾期了,临时任务-->
                    <i v-else-if="item.progress==2&&item.overdue&&item.taskType==2" class="overdue_ls"></i>
                    <!--  不是进度汇报，正常,里程碑任务-->
                    <i v-else-if="item.progress==2&&!item.overdue&&item.taskType==1" class="normal"></i>
                    <!--  不是进度汇报，正常,临时任务-->
                    <i v-else-if="item.progress==2&&!item.overdue&&item.taskType==2" class="normal_ls"></i>
                    <!--  不是进度汇报,延期，零时任务             -->
                    <i v-else-if="item.progress==2&&item.delay&&item.taskType==2" class="delay_ls"></i>
                    <!--  不是进度汇报,延期，里程碑             -->
                    <i v-else-if="item.progress==2&&item.delay&&item.taskType==1" class="delay_ls"></i>
                    {{item.taskName}}
                  </h3>
                  <p>指派人：{{item.distributeName}}</p>
                  <p>截至日期：{{new Date(item.limitTime).Format('yyyy-MM-dd hh:mm')}}<span :class="item.overdue?'overdue':''">{{item.timeMsg}}</span></p>
                  <div class="project-title">
                    <span><i></i>{{item.projectShortName || '无归属项目'}}</span>
                    <span v-show="item.reportCycle!=0"><i></i>定期汇报</span>
                  </div>
                  <div class="cur-progress" v-if="item.taskProgress!=0">已完成:{{item.taskProgress}}%</div>
                </div>
              </div>
            </div>
          </div>
          <!--          我指派的待办-->
          <div class="list">
            <div class="list-head">
              <h3>我指派的（{{my_assign_list.length||0}}）<span>待办</span></h3>
              <div class="switch-status">
                <el-select v-model="my_assign_switch" @change="switch_my_assign_list">
                  <el-option label="全部" value="3">
                  </el-option>
                  <el-option label="今日" value="1">
                  </el-option>
                  <el-option label="未来" value="2">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="list-data scrollbar-y">
              <div v-if="my_assign_list.length==0" class="default-page-task">
                <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
                <p>暂无数据</p>
              </div>
              <div class="list-scroll">
                <div class="data my_task_list" @click='openDetails(item,"my_assign_list")'
                     v-for="(item ,index) in my_assign_list" :key="index">
                  <h3>
                    <!-- 进度汇报-->
                    <i v-if="item.progress==1" class="report"></i>
                    <!--  不是进度汇报，逾期了,里程碑任务-->
                    <i v-else-if="item.progress==2&&item.overdue&&item.taskType==1" class="overdue"></i>
                    <!--  不是进度汇报，逾期了,临时任务-->
                    <i v-else-if="item.progress==2&&item.overdue&&item.taskType==2" class="overdue_ls"></i>
                    <!--  不是进度汇报，正常,里程碑任务-->
                    <i v-else-if="item.progress==2&&!item.overdue&&item.taskType==1" class="normal"></i>
                    <!--  不是进度汇报，正常,临时任务-->
                    <i v-else-if="item.progress==2&&!item.overdue&&item.taskType==2" class="normal_ls"></i>
                    <!--  不是进度汇报,延期，零时任务             -->
                    <i v-else-if="item.progress==2&&item.delay&&item.taskType==2" class="delay_ls"></i>
                    <!--  不是进度汇报,延期，里程碑             -->
                    <i v-else-if="item.progress==2&&item.delay&&item.taskType==1" class="delay_ls"></i>
                    {{item.taskName}}
                  </h3>
                  <p>执行人：{{item.executeNames}}</p>
                  <p>截至日期：{{new Date(item.limitTime).Format('yyyy-MM-dd hh:mm')}}<span :class="item.overdue?'overdue':''">{{item.timeMsg}}</span></p>
                  <div class="project-title">
                    <span><i></i>{{item.projectShortName || '无归属项目'}}</span>
                    <span v-show="item.reportCycle!=0"><i></i>定期汇报</span>
                  </div>
                  <div class="cur-progress" v-if="item.taskProgress!=0">已完成：{{item.taskProgress}}%</div>
                </div>
              </div>
            </div>
          </div>
          <!--          我的任务已办-->
          <div class="list">
            <div class="list-head">
              <div class="list-head">
                <h3>我的任务（{{my_task_list_have.length}}）<span class="active">已办</span></h3>
              </div>
            </div>
            <div class="list-data scrollbar-y">
              <div v-if="my_task_list_have.length==0" class="default-page-task">
                <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
                <p>暂无数据</p>
              </div>
              <div class="list-scroll">
                <div class="data my_task_list my_task_list_have" @click='openDetails(item,"my_task_list_have")'
                     v-for="(item ,index) in my_task_list_have" :key="index">
                  <h3>
                    <!-- 进度汇报-->
                    <i v-if="item.progress==1" class="report"></i>
                    <!--  不是进度汇报，逾期了,里程碑任务-->
                    <i v-else-if="item.progress==2&&item.overdue&&item.taskType==1" class="overdue"></i>
                    <!--  不是进度汇报，逾期了,临时任务-->
                    <i v-else-if="item.progress==2&&item.overdue&&item.taskType==2" class="overdue_ls"></i>
                    <!--  不是进度汇报，正常,里程碑任务-->
                    <i v-else-if="item.progress==2&&!item.overdue&&item.taskType==1" class="normal"></i>
                    <!--  不是进度汇报，正常,临时任务-->
                    <i v-else-if="item.progress==2&&!item.overdue&&item.taskType==2" class="normal_ls"></i>
                    <!--  不是进度汇报,延期，零时任务             -->
                    <i v-else-if="item.progress==2&&item.delay&&item.taskType==2" class="delay_ls"></i>
                    <!--  不是进度汇报,延期，里程碑             -->
                    <i v-else-if="item.progress==2&&item.delay&&item.taskType==1" class="delay_ls"></i>
                    {{item.taskName}}
                  </h3>
                  <p>指派人：{{item.distributeName}}</p>
                  <div class="project-title">
                    <span><i></i>{{item.projectShortName || '无归属项目'}}</span>
                    <span v-show="item.reportCycle!=0"><i></i>定期汇报</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--          我指派的已办-->
          <div class="list">
            <div class="list-head">
              <h3>我指派的（{{my_assign_list_have.length||0}}）<span class="active">已办</span></h3>
            </div>
            <div class="list-data scrollbar-y">
              <div v-if="my_assign_list_have.length==0" class="default-page-task">
                <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
                <p>暂无数据</p>
              </div>
              <div class="list-scroll">
              <div class="data my_task_list my_task_list_have" @click='openDetails(item,"my_assign_list_have")'
                   v-for="(item ,index) in my_assign_list_have" :key="index">
                <h3>
                  <!-- 进度汇报-->
                  <i v-if="item.progress==1" class="report"></i>
                  <!--  不是进度汇报，逾期了,里程碑任务-->
                  <i v-else-if="item.progress==2&&item.overdue&&item.taskType==1" class="overdue"></i>
                  <!--  不是进度汇报，逾期了,临时任务-->
                  <i v-else-if="item.progress==2&&item.overdue&&item.taskType==2" class="overdue_ls"></i>
                  <!--  不是进度汇报，正常,里程碑任务-->
                  <i v-else-if="item.progress==2&&!item.overdue&&item.taskType==1" class="normal"></i>
                  <!--  不是进度汇报，正常,临时任务-->
                  <i v-else-if="item.progress==2&&!item.overdue&&item.taskType==2" class="normal_ls"></i>
                  <!--  不是进度汇报,延期，零时任务             -->
                  <i v-else-if="item.progress==2&&item.delay&&item.taskType==2" class="delay_ls"></i>
                  <!--  不是进度汇报,延期，里程碑             -->
                  <i v-else-if="item.progress==2&&item.delay&&item.taskType==1" class="delay_ls"></i>
                  {{item.taskName}}
                </h3>
                <p>执行人：{{item.executeNames}}</p>
                <div class="project-title">
                  <span><i></i>{{item.projectShortName || '无归属项目'}}</span>
                  <span v-show="item.reportCycle!=0"><i></i>定期汇报</span>
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>
        <loading v-if="is_show_loading"></loading>
      </vuescroll>

    </div>
    <!--    任务详情-->
    <div v-if="is_show_details">
      <taskDetails :data="data_taskDetails" @close="closeDetails" @openTaskHandle="openTaskHandle" @update="init"></taskDetails>
    </div>
    <!--    任务处理-->
    <div v-if="taskHandle_is_show">
      <taskHandle :data="taskHandle_data" @close="closeTaskHandle" @end="taskHandle_end"></taskHandle>
    </div>

  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  import taskDetails from '@/components/taskDetails'
  import taskHandle from '@/components/taskDetails/handle'
  import loading from '@/components/loading'
  export default {
    components: {
      vuescroll, taskDetails, taskHandle,loading
    },
    data() {
      return {
        is_show_loading:true,
        ops: {
          vuescroll: {
            wheelDirectionReverse: true,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: true,//启用横屏滚动
            scrollingY: false,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '250px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px',//距离容器的距离
            keepShow: false,
          },
          bar: {
            background: '#cbd5df',
            keepShow: true,
            size: '6px',
            minSize: 0.1
          }
        },
        my_task_switch: '3',//我的任务 待办 1 今天任务 2 未来任务 3全部任务
        my_assign_switch: '3',//我的指派 待办 1 今天任务 2 未来任务 3全部任务
        my_task_list: [],//我的任务待办
        my_task_list_have: [],//我的任务已办
        my_assign_list: [],//我指派的待办
        my_assign_list_have: [],//我指派的已办
        data_taskDetails: {
          type: 'my_task_list',//my_task_list:我的任务(待办) my_task_list_have:我的任务(已办) my_assign_list:我指派的（待办）my_assign_list_have:我指派的（已办）
          is_show_taskDetails: false
        },//任务详情数据
        is_show_details: false,
        taskHandle_data: {},//任务处理对象
        taskHandle_is_show: false,//任务处理框
      }
    },
    watch:{
      isHavNewTask(val) {
       console.log(val);
        this.init();
     }
    },
    computed: {
      isHavNewTask () {
        return this.$store.state.havNewTask;　　//需要监听的数据
      }
    },
    created() {
     this.init();
    },
    methods: {
      init(){
        //我的任务待办
        this.getTaskList({
          flag: this.my_task_switch,
          haveDone: false,
          self: true,
        }, 'my_task_list');

        //我指派的 待办
        this.getTaskList({
          flag: this.my_assign_switch,//1 今天任务 2 未来任务 3全部任务
          haveDone: false,//true查询已办任务，false查询未办任务
          self: false,//true 查询“我的任务” false 查询“我指派的任务”
        }, 'my_assign_list');

        //我的任务已办
        this.getTaskList({
          flag: 3,
          haveDone: true,
          self: true,
        }, 'my_task_list_have');

        // 我指派的已办
        this.getTaskList({
          flag: 3,
          haveDone: true,
          self: false,
        }, 'my_assign_list_have');
      },
      //任务处理完成后的回调
      taskHandle_end(){
        //关闭任务详情框
        this.is_show_details = false;
        //关闭任务处理框
        this.taskHandle_is_show = false;
        this.init();
      },
      openDetails(item, type) {
        this.taskHandle_data=item;
        this.taskHandle_data.taskId=item.taskId;
        this.taskHandle_data.reportCycle=item.reportCycle;
        this.taskHandle_data.limitTime=item.limitTime;
        this.is_show_details = true;
        this.data_taskDetails = item;
        this.data_taskDetails.type = type;
      },
      closeDetails() {
        this.is_show_details = false;
      },
      //切换我的任务 待办 1 今日 2未来 3全部
      switch_my_task_list() {
        this.getTaskList({
          flag: this.my_task_switch,
          haveDone: false,
          self: true,
        }, 'my_task_list');
      },
      //切换我指派的 待办 1 今日 2未来 3全部
      switch_my_assign_list() {
        this.getTaskList({
          flag: this.my_assign_switch,//1 今天任务 2 未来任务 3全部任务
          haveDone: false,//true查询已办任务，false查询未办任务
          self: false,//true 查询“我的任务” false 查询“我指派的任务”
        }, 'my_assign_list');
      },
      //查询“我的未办，包含我的任务未办，我指派的任务未办” 和“我的已办，包含我的任务已办，我指派的任务已办”任务
      getTaskList(data, name) {
        let params = {
          pageNum: 1,
          pageSize: 999,
          userId: this.$store.state.userInfo.userId,
          delay:false
        };
        params.flag = data.flag;//1为今日任务 2为未来任务 3全部任务
        params.haveDone = data.haveDone;//true查询已办任务，false查询未办任务
        params.self = data.self;//true 查询“我的任务” false 查询“我指派的任务”
        this.$http.get('task/task/query/view', {params: params}).then(res => {
          if (res.statusCode == 200) {
            if (name == 'my_task_list') {
              console.log(res.data.list);
              this.my_task_list = res.data.list;
              console.log(this.my_task_list)
            } else if (name == 'my_task_list_have') {
              this.my_task_list_have = res.data.list;
            } else if (name == 'my_assign_list') {
              this.my_assign_list = res.data.list;
            } else if (name == 'my_assign_list_have') {
              this.my_assign_list_have = res.data.list;
            }
            setTimeout(()=> {
              this.is_show_loading=false;
            }, 1000);
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      handleComplete(v, h, n) {
        console.log(v);
        console.log(h)
      },
      // 关闭任务处理框
      closeTaskHandle() {
        //关闭任务处理框
        this.taskHandle_is_show = false;
        //打开任务详情
        this.is_show_details = true;
      },
      //打开处理框
      openTaskHandle() {
        //关闭任务详情框
        this.is_show_details = false;
        //打开任务处理框
        this.taskHandle_is_show = true;
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .template {
    width: 100%;
    height: 100%;
    > .main {
      width: 100%;
      height: 100%;

      .main-list {
        position: absolute;
        height: 100%;
        display: flex;

        .list {
          width: 384px;
          height: calc(100% - 22px);
          background-color: #ffffff;
          border-radius: 6px;
          padding: 16px;
          margin-right: 24px;
          display: flex;
          position: relative;
          overflow: hidden;
          flex-direction: column;

          .list-head {
            height: 61px;
            position: relative;

            > h3 {
              color: #454A55;
              font-size: 14px;
              line-height: 61px;
              padding-left: 5px;
              position: relative;

              span {
                position: absolute;
                font-size: 12px;
                color: #0A52E4;
                width: 40px;
                height: 22px;
                line-height: 22px;
                text-align: center;
                background-color: #F4F5F9;
                border-radius: 4px;
                left: 100px;
                top: 19px;
              }

              .active {
                color: #96A2AA;
              }
            }

            .switch-status {
              right: 0;
              top: 14px;
              position: absolute;
              width: 72px;
              height: 32px;
              border-radius: 16px;
              overflow: hidden;
            }
          }

          .list-data {
            height: calc(100% - 61px);
            width: 100%;
            padding: 16px;
            background-color: #f4f5f9;
            border-radius: 6px;
            overflow-y: auto;

            &::-webkit-scrollbar {
              display: none
            }

            -ms-overflow-style: none; /* IE 10+ */
            scrollbar-width: none; /* Firefox */
            > .list-scroll {
              width: 100%;
              height: auto;

              > .data {
                width: 100%;
                padding: 16px;
                background-color: #ffffff;
                border-radius: 6px;
                margin-bottom: 16px;
              }

              .my_task_list {
                height: 162px;
                padding: 0 16px;
                cursor: pointer;
                position: relative;
                .cur-progress{
                  position: absolute;
                  right: 20px;
                  top: 16px;
                  font-size: 14px;
                  color: #96A2AA;
                }
                > h3 {
                  position: relative;
                  color: #454A55;
                  font-size: 14px;
                  text-indent: 22px;
                  line-height: 46px;
                  padding-bottom: 7px;
                  font-weight: normal;
                  overflow: hidden;
                  text-overflow:ellipsis;
                  white-space: nowrap;
                  > i {
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    top: 17px;
                    left: 0;
                    background-position: center;
                    background-size: cover;
                    /*background-image: url("../../../assets/img/task/ic_job_blue.png");*/
                  }
                  >.overdue{
                    background-image: url("../../../assets/img/task/ic_job_orange.png");
                  }
                  >.overdue_ls{
                    width: 15px;
                    height: 18px;
                    top: 15px;
                    background-image: url("../../../assets/img/task/ic_tem_yq.png");
                  }
                  >.report{
                    background-image: url("../../../assets/img/task/ic_hb_zc.png");
                  }
                  >.normal{
                    background-image: url("../../../assets/img/task/ic_job_blue.png");
                  }
                  >.normal_ls{
                    width: 15px;
                    height: 18px;
                    top: 15px;
                    background-image: url("../../../assets/img/task/ic_tem_zc.png");
                  }
                  >.delay_ls{
                    top: 15px;
                    width: 14px;
                    height: 16px;
                    background-image: url("../../../assets/img/task/ic_yq_temporary.png");
                  }
                  >.delay{
                    top: 15px;
                    width: 14px;
                    height: 16px;
                    background-image: url("../../../assets/img/task/ic_yq_milestone.png");
                  }
                }

                > p {
                  font-size: 14px;
                  color: #96A2AA;
                  padding-bottom: 15px;
                  position: relative;
                  overflow: hidden;
                  text-overflow:ellipsis;
                  white-space: nowrap;
                  > span {
                    position: absolute;
                    right: 0;
                    top: 0;
                  }

                  > span.overdue {
                    color: #FF8F2B;
                  }
                }

                .project-title {
                  margin-top: 5px;
                  border-top: 1px solid #EEEEEE;
                  line-height: 44px;
                  color: #454A55;
                  height: 44px;

                  span {
                    float: left;
                    padding-right: 52px;
                    padding-left: 20px;
                    position: relative;
                    i {
                      position: absolute;
                      width: 12px;
                      height: 12px;
                      /*border: 1px solid #000000;*/
                      left: 0;
                      top: 15px;
                      background-image: url("../../../assets/img/task/ic_link.png");
                    }
                  }
                  >span:nth-child(1){
                    width:150px ;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                  }
                  >span:nth-child(2){
                    i{
                      background-image: url("../../../assets/img/task/ic_hb.png");
                    }
                  }
                }
              }

              .my_task_list_have{
                height: 132px;
              }
            }

          }
        }
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .switch-status {
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      border: none;
      padding: 0;
      background-color: #F4F5F9;
      padding-left: 15px;
      color: #96A2AA;
      font-size: 14px;
    }

    .el-input__icon {
      line-height: 1;
    }
  }
</style>
